<template>
  <div class="summarize">
    <div class="title">热门项目</div>
    <div class="porjectClass">
      <Card v-for="(item, index) in projects" :key="index" class="projectCard">
        <div class="projectTitle">
          {{ item.name }}
        </div>
        <div class="projectDesc">
          {{ item.desc }}
        </div>
        <div class="foot">
          <div class="lang">
            <Icon type="md-code" style="padding-right: 5px" />{{ item.lang }}
          </div>
          <div class="projectNum">
            <div class="num">
              <Icon type="md-eye" style="padding-right: 2px" />{{ item.watchs }}
            </div>
            <div class="num">
              <Icon type="ios-star" style="padding-right: 2px" />{{
                item.stars
              }}
            </div>
            <div class="num">
              <Icon type="md-share" style="padding-right: 2px" />{{
                item.shares
              }}
            </div>
          </div>
        </div>
      </Card>
    </div>
    <div class="title">动态</div>
    <div class="syn">
      <Timeline>
        <TimelineItem>
          <p class="time">1996年</p>
          <p class="content">leisure 问世</p>
        </TimelineItem>
        <TimelineItem>
          <p class="time">2015年</p>
          <p class="content">入学沈阳理工大学</p>
        </TimelineItem>
        <TimelineItem>
          <p class="time">2019年</p>
          <p class="content">入学沈阳工业大学</p>
        </TimelineItem>
        <TimelineItem>
          <p class="time">2022年7月1日</p>
          <p class="content">发布 iPad</p>
        </TimelineItem>
        <TimelineItem>
          <p class="time">2023年10月5日</p>
          <p class="content">发布 zz-admin</p>
        </TimelineItem>
      </Timeline>
    </div>
  </div>
</template>

<script>
export default {
  name: 'summarize',
  data() {
    return {
      projects: [
        {
          name: 'zz-admin',
          desc: 'zz后台管理系统',
          lang: 'Java',
          watchs: 2,
          stars: 0,
          shares: 0,
        },
        {
          name: 'zz-admin-web',
          desc: 'zz-admin前台',
          lang: 'JavaScript',
          watchs: 1,
          stars: 0,
          shares: 0,
        },
        {
          name: 'zz-parent',
          desc: '项目父级依赖，所有项目都依赖它，便于统一依赖管理。',
          lang: 'Java',
          watchs: 1,
          stars: 2,
          shares: 0,
        },
      ],
    }
  },
}
</script>

<style lang="less" scoped>
.title {
  margin: 10px 0px;
  font-size: 15px;
  font-weight: bold;
  color: rgb(121, 100, 100);
}
.porjectClass {
  display: flex;
  flex-wrap: wrap;

  .projectCard {
    width: 48%;
    height: 150px;
    margin: 5px 5px;

    .projectTitle {
      font-size: 15px;
      font-weight: bold;
    }
    .projectDesc {
      font-size: 12px;
      color: #6a6a6a;
    }
    .foot {
      position: relative;
      top: 60px;

      .lang {
        float: left;
        font-size: 12px;
        color: #6a6a6a;
      }
      .projectNum {
        float: right;
        font-size: 12px;
        color: #6a6a6a;
        .num {
          display: inline-block;
          padding: 0px 5px;
        }
      }
    }
  }
}
.syn {
  height: 100%;
  .time {
    font-size: 14px;
    font-weight: bold;
  }
  .content {
    padding-left: 5px;
  }
}
</style>
